<!--
 * @Author: lxw
 * @Date: 2021-02-09 12:00:28
 * @Description: 加载更多
 -->
<template>
  <div class="text-center grey--text load-more">
    <span v-show="status === 'before'" class="before-state" @click="$emit('click')">点击加载更多</span>
    <v-icon v-show="status === 'loading'" class="ml-2 icon-loading">mdi-loading</v-icon>
    <span v-show="status === 'noMore'">———— 我也是有底线的 ————</span>
  </div>
</template>

<script>
const STATUS_MAP = ['before', 'loading', 'noMore']

export default {
  name: 'LoadMore',
  props: {
    status: {
      type: String,
      default: 'before',
      validator (value) {
        return STATUS_MAP.includes(value)
      }
    }
  }
}
</script>

<style scoped>
.icon-loading {
  animation: loading 1s linear infinite;
}
.before-state {
  cursor: pointer;
}
.before-state:hover {
  color: #fff;
}
</style>
